<!-- 合同-合同中心-已签署合同 -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew
        title="已签署"
        :breadCrumb="['合同', '合同中心', '已签署列表']"
        :showBack="false"
      ></PageHeaderNew>
    </template>
    <ConditionBox :margin-bottom="20" :margin-top="0">
      <template #left>
        <a-input-search
          :style="{ width: '220px' }"
          placeholder="姓名"
          search-button
          @search="onSearch"
          @press-enter="onSearch"
          v-model="nameSearch"
        />
      </template>
    </ConditionBox>
    <table-turn
      :table-data="getTableData"
      ref="tableRef"
      :args="{
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false
        }
      }"
    >
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="name" title="姓名" />
      <a-table-column :width="200" data-index="mobile" title="手机号码" />
      <a-table-column :width="200" data-index="companyId" title="公司">
        <template #cell="{ record }">
          {{
            companyList.find((item) => item.id === record.companyId)?.name ||
            '-'
          }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="positionLevel" title="入职部门">
        <template #cell="{ record }">
          {{
            positionLevelList.find((item) => item.id === record.positionLevel)
              ?.name || '-'
          }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="positionName" title="职位" />
      <a-table-column :width="200" data-index="natureWork" title="工作性质" />
      <a-table-column :width="200" data-index="definition" title="员工状态">
        <template #cell="{ record }">
          {{
            record.progress === 1
              ? '入职申请'
              : record.progress === 2
              ? '待入职'
              : record.progress === 3
              ? '预入职'
              : record.progress === 4
              ? '入职办理'
              : record.progress === 5
              ? '正式入职'
              : record.progress === 6
              ? '待离职'
              : record.progress === 7
              ? '离职'
              : record.progress === 8
              ? '放弃入职'
              : record.progress === 9
              ? '实习结束'
              : record.progress === 10
              ? '转正'
              : record.progress === 11
              ? '试用期'
              : record.progress === 12
              ? '人事异动'
              : ''
          }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="entryTime" title="入职时间" />
      <a-table-column
        :width="120"
        data-index="contractStatus"
        title="签署状态"
        fixed="right"
      >
        <template #cell="{ record }">
          <div
            :style="{
              color: contractStatus.find(
                ({ value }) => value === record.contractStatus
              )?.color
            }"
          >
            {{
              contractStatus.find(
                ({ value }) => value === record.contractStatus
              )?.text || '-'
            }}
          </div>
        </template>
      </a-table-column>
      <a-table-column :width="120" data-index="" title="操作" fixed="right">
        <template #cell="{ record }">
          <a-dropdown @select="moreItemControl($event, record)">
            <a-link>更多功能</a-link>
            <template #content>
              <a-doption :value="1">下载</a-doption>
              <!-- <a-doption :value="2">打印</a-doption> -->
              <a-doption :value="3">合同变更</a-doption>
              <a-doption :value="4">合同终止</a-doption>
              <a-doption :value="5">合同解除</a-doption>
            </template>
          </a-dropdown>
        </template>
      </a-table-column>
    </table-turn>
  </ContentCard>
</template>

<script lang="tsx" setup>
import { GetLegalEntityList } from '@/apis/management/organization/organizationManagement/LegalEntity/index';
import { GetPositionLevelList } from '@/apis/management/organization/baseSetting';
import {
  GetWaitSignedContractList,
  EditContractStatus,
  GetUserContractByStatusDetail
} from '@/apis/management/contract/contractManagement/waitSigned';
import { contractStatus } from '@/utils/dictionary/contract';
import { GetContractDetailFiles } from '@/apis/management/contract/contractManagement/haveSigned';
import { ChangeContractState } from '@/apis/management/contract/contractManagement/haveSigned';
import { downloadFiles, printFiles } from '@/utils/file';
import { Modal } from '@arco-design/web-vue';

const router = useRouter();
const route = useRoute();

let tableRef = ref();
let nameSearch = ref(route.query.userName); // 搜索框值

// 获取表格数据
const getTableData = async (pageData?: any) => {
  try {
    const res = await GetWaitSignedContractList({
      codes: '10',
      name: nameSearch.value,
      ...pageData
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 搜索框搜索事件
const onSearch = () => {
  refresh();
};

// 表格中的三个小点按钮的下拉菜单
const moreItemControl = (key: any, record: any) => {
  if (key === 1) download(record.id);
  else if (key === 2) printFile(record.id);
  else if (key === 3) goContractChange(record.id);
  else if (key === 4) contractFinished(record.id, 12);
  else if (key === 5) contractFinished(record.id, 13);
};

// 下载
const download = async (id: number) => {
  try {
    const res = await GetContractDetailFiles({ id });
    downloadFiles(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 打印
const printFile = async (id: number) => {
  const res = await GetContractDetailFiles({ id });
  printFiles(res);
};

// 去往合同变更页面
const goContractChange = (userId?: number) => {
  router.push({
    name: 'ContractChange',
    query: {
      // userIds: [id]
      userId
    }
  });
};

// 合同终止/ 解除合同 type 合同终止11 合同解除12
const contractFinished = (id: number, type: 12 | 13) => {
  const title = type === 12 ? '终止' : '解除';
  const onOk = async () => {
    let res: any = await GetUserContractByStatusDetail({
      userId: id,
      status: 6
    });
    if (res?.length) {
      await EditContractStatus({
        id: res[0].id,
        status: type === 12 ? 8 : 7
      });
    }
    await ChangeContractState({
      id,
      type
    });
    refresh();
  };
  Modal.open({
    title: `${title}合同`,
    content: (<h3> 是否确定{title}该合同？</h3>) as any,
    onOk
  });
};

// 刷新表格数据
const refresh = () => {
  tableRef.value.loadData();
};

let companyList = ref<any[]>([]);
let positionLevelList = ref<any[]>([]);
let loadData = async () => {
  let [legalEntity, positionLevel] = await Promise.all([
    GetLegalEntityList({ pageNumber: 0, pageSize: -1 } as any),
    GetPositionLevelList({ page: 1, size: -1 })
  ]);
  companyList.value = legalEntity?.content || [];
  positionLevelList.value = positionLevel?.content || [];
};
loadData();
</script>

<style scoped lang="less">
.enable::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: relative;
  right: 3px;
  background-color: var(--enable);
  // background-color: #fff4d4;
}
</style>
